<template>
	<view class="container">
		<tui-navigation-bar @init="initNavigation" :transparent="true" backgroundColor="#313431" color="#222222"
			:title="pageTitle" :fontWeight="600">
			<view class="tui-header" :style="{ marginTop: navBarTop + 'px' }">
				<view class="get-back dy-iconfont icon-qiehuanqizuo" @click="goBack('page_sharing/accompany/details')">
				</view>
			</view>
		</tui-navigation-bar>
		<view class="main">
			<view class="rz-header">
				<view class="name">碰头人入驻</view>
			</view>
			<view class="rz-content">
				<image class="rz-icon"
					src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/empty/rz.png"
					mode="heightFix"></image>
				<!-- <view class="hite">入驻成功立享40元现金红包</view> -->
				<view class="step">
					<view class="step-1"></view>
					<view class="dotted"></view>
					<view class="step-2"></view>
					<view class="dotted"></view>
					<view class="step-3"></view>
				</view>
				<view class="identity-card">
					<view class="title">身份证照片</view>
					<view class="content">身份证照片需要上传彩色照片，证件有效期大于60天，您的身份证照片仅做审核用途。
						<!-- <text style="color: #396DE8;" @click="look">查看上传说明</text> -->
					</view>
					<view class="identity-list">
						<view class="identity-item" @click="uploadCard('z')">
							<image class="card-image"
								:src="fileList1.length > 0 ? fileList1[0].thumb : 'https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/user/card-z.png'"
								mode="aspectFill"></image>
							<view>点击上传人像面</view>
						</view>
						<view class="identity-item" @click="uploadCard('f')">
							<image class="card-image"
								:src="fileList2.length > 0 ? fileList2[0].thumb : 'https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/user/card-f.png'"
								mode="aspectFill"></image>
							<view>点击上传国徽面</view>
						</view>
						<uv-upload :previewImage="false" :fileList="fileList1" :name="uploadname" multiple :maxCount="1"
							accept="image" @afterRead="afterRead" @error="uploadError" ref="upload"></uv-upload>
					</view>
				</view>
				<view class="content_hui">上传身份证照片后信息可自动录入</view>
				<view class="rz-list">
					<view class="name">姓名</view>
					<input class="rz-input" v-model="name" type="text" placeholder="请填写" />
				</view>
				<view class="rz-list">
					<view class="name">证件号码</view>
					<input class="rz-input" v-model="identity" type="idcard" placeholder="请填写" />
				</view>
				<!-- 				<view class="rz-list">
					<view class="name">身份证开始时间</view>
					<input class="rz-input" v-model="identity_start" type="text" placeholder="请填写" />
				</view>
				<view class="rz-list">
					<view class="name">身份证结束时间</view>
					<input class="rz-input" v-model="identity_end" type="idcard" placeholder="请填写" />
				</view> -->
			</view>
		</view>
		<button class="btn-primary btn-rz" @tap.stop.prevent="onPayment">下一步</button>
		<survey-pop></survey-pop>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	import mp from "@/mixins/mp.js";
	import {
		idCard
	} from '@/uni_modules/uv-ui-tools/libs/function/test.js';
	import dayjs from "dayjs";
	const app = getApp();
	export default {
		mixins: [mp],
		options: {
			styleIsolation: 'shared'
		}, //解决/deep/不生效**
		components: {},
		data() {
			return {
				navBarOpacity: 0, //标题图标距离顶部距离
				scrollTop: 0.5, //页面滚动高度
				navBarTop: 0, // 导航栏content顶部m-top
				pageTitle: '', //标题
				agreement: false,
				loading: false,
				fileList1: [],
				fileList2: [],
				identity: '',
				name: '',
				identity_start: '',
				identity_end: '',
				uploadType: '',
				uploadname: 1,
			};
		},
		/**
		 * 计算属性
		 */
		computed: {},
		onLoad(options) {
			let step1 = uni.getStorageSync('step1');
			if (step1) {
				this.fileList1 = step1.fileList1
				this.fileList2 = step1.fileList2
				this.name = step1.userAuth.realName
				this.identity = step1.userAuth.cardNumber
			}
		},
		onShow: function() {},
		onHide() {},
		/**
		 * 下拉
		 */
		onPullDownRefresh: function() {},
		/**
		 * 触底
		 */
		onReachBottom() {},
		/**
		 * 滚动
		 */
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
		},
		methods: {
			onAgreement(detail, name) {
				this.agreement = !detail
			},
			initNavigation(e) {
				this.navBarOpacity = e.opacity;
				this.navBarTop = e.top;
			},
			uploadCard(type) {
				this.uploadType = type
				this.uploadname = type == 'z' ? 1 : 2
				this.$refs.upload.chooseFile();
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				this[`fileList${event.name}`] = []
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				const result = await this.uploadFilePromise(lists[0].url)
				if (!result) {
					this[`fileList${event.name}`] = []
				}
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					result: result,
				}))
				if (event.name == 1) {
					this.name = result.name
					this.identity = result.idNum
				} else {
					this.identity_start = result.validStartDate
					this.identity_end = result.validEndDate
				}
			},
			uploadFilePromise(url, type) {
				this.$refs.toast.show({
					type: 'loading',
				})
				return new Promise((resolve, reject) => {
					let header = {}
					if (app.globalData.token) {
						header = {
							token: 'Bearer ' + app.globalData.token,
							"Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
						}
					}
					let a = uni.uploadFile({
						url: app.globalData.api_root + '/client/peng-register/verify/id-card',
						filePath: url,
						name: 'file',
						formData: {
							cardSide: this.uploadType == 'z' ? 'FRONT' : 'BACK'
						},
						header: header || {},
						success: (res) => {
							setTimeout(() => {
								this.$refs.toast.hide()
								let result = typeof res.data === "object" ? res.data : JSON
									.parse(res.data);
								if (0 == result.code || 200 == result.code) {
									resolve(result.data)
								} else {
									this.$refs.toast.show({
										type: 'default',
										message: result.msg
									})
									setTimeout(() => {
										this.$refs.toast.hide()
									}, 1000)
									resolve(false)
								}
							}, 1000)
						},
						fail: (err) => {
							console.log('err', err);
							setTimeout(() => {
								resolve(false);
								this.$refs.toast.hide()
							}, 1000)
						},
					});
				})
			},

			onPayment() {

				if (!this.fileList1[0]) {
					this.$refs.toast.show({
						type: 'default',
						message: "点击上传人像面"
					})
					setTimeout(() => {
						this.$refs.toast.hide()
					}, 1000)
					return
				}
				if (!this.fileList2[0]) {
					this.$refs.toast.show({
						type: 'default',
						message: "点击上传国徽面"
					})
					setTimeout(() => {
						this.$refs.toast.hide()
					}, 1000)
					return
				}
				if (!this.name) {
					this.$refs.toast.show({
						type: 'default',
						message: "请输入姓名"
					})
					setTimeout(() => {
						this.$refs.toast.hide()
					}, 1000)
					return
				}
				if (!this.identity) {
					this.$refs.toast.show({
						type: 'default',
						message: "请输入身份证"
					})
					setTimeout(() => {
						this.$refs.toast.hide()
					}, 1000)
					return
				}
				if (!idCard(this.identity)) {
					this.$refs.toast.show({
						type: 'default',
						message: "请输入正确的身份证"
					})
					setTimeout(() => {
						this.$refs.toast.hide()
					}, 1000)
					return
				}
				uni.setStorageSync('register_save', {
					fileList1: this.fileList1,
					fileList2: this.fileList2,
					'userAuth': {
						realName: this.name,
						cardNumber: this.identity,
					}
				});
				uni.setStorageSync('step1', {
					fileList1: this.fileList1,
					fileList2: this.fileList2,
					'userAuth': {
						realName: this.name,
						cardNumber: this.identity,
					}
				});
				uni.navigateTo({
					url: '/page_account/autonym/service',
				});
			},
			look() {
				app.navigationTo('https://kf.qq.com/faq/230615MjMBRf230615NNn2yY.html')
			},
			// 返回上一页
			goBack: function(url) {
				if (!url) {
					app.navigationTo(url + '?id=' + this.userId)

				} else {
					app.beNavigateBack();
				}
				uni.removeStorageSync('details');
			},
		}
	};
</script>
<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: #FFFFFF;
		background-image: url("https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/server-bg.png");
		background-repeat: no-repeat;
		background-size: 100% 640rpx;

		.tui-header {
			width: 100%;
			position: fixed;
			top: 0;
			padding: 0 42rpx;
			display: flex;
			align-items: center;
			height: 32px;
			transform: translateZ(0);
			z-index: 99999;
			box-sizing: border-box;

			.get-back {
				flex-shrink: 0;
				width: 36rpx;
				height: 36rpx;
				color: #000;
				font-size: 36rpx;
				padding: 2rpx 40rpx 2rpx 2rpx;
			}
		}

		.main {
			box-sizing: border-box;
			padding: 220rpx 0 160rpx;
			min-height: 100vh;

			.rz-header {
				box-sizing: border-box;
				padding: 0 280rpx 0 52rpx;

				.name {
					font-size: 48rpx;
					font-weight: 900;
					color: #1E1F1F;
					line-height: 44rpx;
					margin-bottom: 32rpx;
				}

				.title {
					font-size: 22rpx;
					font-weight: 400;
					color: #282D2D;
					line-height: 30rpx;
					margin-bottom: 22rpx;
				}
			}

			.rz-content {
				box-sizing: border-box;
				padding: 38rpx 36rpx 24rpx;
				background: #FFFFFF;
				border-radius: 40rpx 40rpx 0rpx 0rpx;
				position: relative;

				.rz-icon {
					height: 158rpx;
					position: absolute;
					right: 88rpx;
					top: -126rpx;
				}

				.hite {
					font-size: 24rpx;
					font-weight: 400;
					color: #FF4664;
					line-height: 33rpx;
					box-sizing: border-box;
					padding: 10rpx 0rpx 10rpx 17rpx;
					background: rgba(255, 70, 100, 0.1);
					border-radius: 12rpx;
					margin-bottom: 41rpx;

					&::before {
						font-family: "dy-iconfont";
						content: "\e62b";
						font-size: 28rpx;
						padding-right: 7rpx;
						box-sizing: border-box;
					}
				}

				.step {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 103rpx;

					.step-1 {
						width: 14rpx;
						height: 14rpx;
						background: #0E0E0D;
						border-radius: 50%;
						border: 8rpx solid #CFCFCF;
						position: relative;


					}

					.step-1::before {
						position: absolute;
						left: 50%;
						bottom: -63rpx;
						transform: translateX(-50%);
						min-width: 150rpx;
						content: "上传实名信息";
						font-size: 24rpx;
						font-weight: 900;
						color: #282D2D;
						line-height: 33rpx;
						display: block;

					}

					.dotted {
						width: 222rpx;
						height: 1rpx;
						border-bottom: 1px dashed #8F8F8F;
						box-sizing: border-box;
					}

					.step-2 {
						width: 20rpx;
						height: 20rpx;
						background: #CFCFCF;
						backdrop-filter: blur(10px);
						border-radius: 50%;
						position: relative;

					}

					.step-2::before {
						position: absolute;
						left: 50%;
						bottom: -63rpx;
						transform: translateX(-50%);
						min-width: 150rpx;
						content: "填写入驻信息";
						font-size: 24rpx;
						font-weight: 900;
						color: #282D2D;
						line-height: 33rpx;
						display: block;
					}

					.step-3 {
						width: 20rpx;
						height: 20rpx;
						background: #CFCFCF;
						backdrop-filter: blur(10px);
						border-radius: 50%;
						position: relative;

					}

					.step-3::before {
						position: absolute;
						left: 50%;
						bottom: -63rpx;
						transform: translateX(-50%);
						min-width: 150rpx;
						content: "填写基础信息";
						font-size: 24rpx;
						font-weight: 900;
						color: #282D2D;
						line-height: 33rpx;
						display: block;
					}
				}

				.content_hui {
					font-size: 22rpx;
					font-weight: 400;
					color: #999B9B;
					line-height: 30rpx;
					margin-bottom: 24rpx;
				}

				.identity-card {
					.title {
						font-size: 30rpx;
						font-weight: 900;
						color: #282D2D;
						line-height: 40rpx;
						margin-bottom: 16rpx;
					}

					.content {
						font-size: 22rpx;
						font-weight: 400;
						color: #999B9B;
						line-height: 30rpx;
						margin-bottom: 24rpx;
					}

					.identity-list {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 40rpx;

						/deep/.uv-upload {
							flex: 0;
						}

						.identity-item {
							width: calc((100% - 31rpx) / 2);
							height: 237rpx;
							background: #FFFFFF;
							box-shadow: 0px 0 20rpx 0px #EBF2EE;
							border-radius: 4rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #282D2D;
							line-height: 33rpx;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;

							.card-image {
								width: 222rpx;
								height: 132rpx;
								background: #F6F8F7;
								margin-bottom: 24rpx;
							}
						}
					}
				}

				.rz-list {
					width: 100%;
					box-sizing: border-box;
					padding: 24rpx 28rpx;
					background: #F6F8F7;
					border-radius: 44rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 36rpx;

					.name {
						font-size: 30rpx;
						font-weight: 900;
						color: #282D2D;
						line-height: 40rpx;
					}

					.rz-input {
						flex: 1;
						font-size: 28rpx;
						font-weight: 400;
						color: #282D2D;
						line-height: 37rpx;
						text-align: right;
						// direction: rtl;
					}
				}
			}
		}

		.btn-rz {
			position: fixed;
			bottom: 64rpx;
			left: 50%;
			// height: 102rpx;
			// line-height: 102rpx;
			transform: translateX(-50%);
			width: calc(100% - 77rpx);
			font-size: 32rpx;
			font-weight: 900;
			z-index: 3;
		}
	}
</style>